<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-css三大特性</title>
    <style>
        /* 继承 */
        *{
            font-size: 30px;
            font-weight: bold;
        }
        div{
            color: blue;
        }
        /* 层叠 */
        .box{
            width: 1000px;
            height:500px;
            margin:0 auto;
            border: 1px dashed red;
            background: url(images/200.png) no-repeat;
            /* 位置 */
            background-position: right top;
            background-position: right bottom;
        }
        /* 3.优先级 */
        /* footer{}>*{} */
        footer{
            font-weight: normal;
            font-size: 20px;
            color: #f60;
        }
        footer.copyright{
            color: #f36!important;
        }
    </style>
</head>
<body>
    <!-- 
        继承
            继承父元素设置的一些样式属性
        层叠
            后面的样式覆盖前面的样式
        优先级
            权重!important>行类样式优先级高>通配符选择器优先级最低

            !important使用布局框架时，想让自己的样式覆盖框架样式时
     -->

    <!-- 1.继承 -->
    <p>孙尚香</p>
    <div><span>毒蘑菇</span></div>
    <!-- 2.层叠 -->
    <div class="box"></div>
    <!-- 3.优先级 -->
    <footer class="copyright" style="color:#000;">@王者荣耀版权设置</footer>
</body>
</html>